import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import fast from "@/assets/images/tabbar/fast.png"
import home1 from "@/assets/images/tabbar/home_1.png"
import home2 from "@/assets/images/tabbar/home_2.png"
import my1 from "@/assets/images/tabbar/my_1.png"
import my2 from "@/assets/images/tabbar/my_2.png"
import "./Tabbar.less"

const useStyles = makeStyles({
    root: {
        width: 500,
    },
});

export default function SimpleBottomNavigation() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);
    const [isShow, setIsShow] = React.useState(true);
    let history = useHistory();

    // 没有componentDidMount
    // useEffect 来代替

    // 组件加载完毕后，拿到当前页面的路径来判断， ["/home", "/fast", "/user"]
    useEffect(() => {
        console.log(history.location.pathname);//  /login  /register
        // if (["/home", "/fast", "/user"].includes(history.location.pathname)) {
        //     setIsShow(true)
        // } else {
        //     setIsShow(false)
        // }
        setIsShow(["/home", "/fast", "/user"].includes(history.location.pathname))
    }, [history.location.pathname])

    return (
        <BottomNavigation
            style={{ display: isShow ? "flex" : "none" }}
            value={value}
            onChange={(event, newValue) => {
                console.log(newValue);
                // if (newValue === 0) {
                //     history.push("/home")
                // } else if (newValue === 1){
                //     history.push("/fast")
                // } else if (newValue === 2){
                //     history.push("/user")
                // }
                // switch (newValue) {
                //     case 0:
                //         history.push("/home")
                //         break;
                //     case 1:
                //         history.push("/fast")
                //         break;
                //     case 2:
                //         history.push("/user")
                //         break;
                //     default:
                //         break;
                // }

                let obj = {
                    "0": "/home",
                    "1": "/fast",
                    "2": "/user",
                }
                console.log(newValue.toString());
                history.push(obj[newValue.toString()])
                setValue(newValue);
            }}
            showLabels
            className={classes.root}
        >
            <BottomNavigationAction label="首页" icon={<img src={value === 0 ? home1 : home2} alt="" />} />
            <BottomNavigationAction label="快速刷题" icon={<img src={fast} alt="" />} />
            <BottomNavigationAction label="我的" icon={<img src={value === 2 ? my1 : my2} alt="" />} />
        </BottomNavigation>
    );
}